<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china'
import resize from '../../../assets/js/charts/resize'

export default {
    mixins: [resize],
    // 接收父组件传递过来的信息
    props: {
        ChinaOption: {},
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        }

    },
    data() {
        return {
            chart: null,
            //地图中，提示框的边框背景图
            borderPic: require("../../../assets/images/databorder.png"),
        }
    },
    mounted() {
        this.initChart();
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    watch: {
        //上级页面传来的新用户数据
        ChinaOption: {
            handler(a, b) {
                if (!is_empty(a)) {
                    this.initChart();
                }
            },
            immediate: true
        }
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById(this.id));
            let chartSeries = [{
                type: 'map',
                mapType: 'china',
                geoIndex: 0,
                z: 0
            }];
            // 根据产品的要求，最多同时显示3个新登录用户信息提示框，由于户登录的位置坐标是获取不到的，所以写死3个坐标值，在地图上设置3个固定的位置，用来显示提示：
            let coordinateData = [[113, 23], [116, 28], [101, 27]];//提示框坐标
            if (!is_empty(this.ChinaOption)) {
                let self = this;
                self.ChinaOption.forEach(function (item, i) {
                    let imgUrl = self.BASE_URL + item.avatar_path;
                    // console.log(self.getImgData(imgUrl))
                    chartSeries.push({
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: [coordinateData[i]],//显示位置坐标
                        symbolSize: 6,
                        zlevel: 2,
                        rippleEffect: { //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: 'stroke', //波纹绘制方式 stroke, fill
                            scale: 4 //波纹圆环最大限制，值越大波纹越大
                        },
                        itemStyle: {
                            color: 'transparent',
                            // color: '#FFFF00',//辐射点的颜色
                        },
                        label: {
                            normal: {
                                /** echarts富文本标签配置：
                                 * borderColor和borderWidth属性要同时有值，边框线才能显示
                                 */
                                position: [-25, -105],//提示框相对位置：right/top
                                show: true,
                                //用\n来分行，{a|文本}'  a给类名在ric里面写对应的样式
                                formatter: "{title|新用户登录}\n{br|}\n{img|}{name|" + item.user_name + " }{address|" + item.org_names + "}",
                                padding: [40, 40, 25, 20],
                                fontSize: 14,
                                color: "#fff",
                                backgroundColor: {
                                    image: self.borderPic//引入提示框的背景图片
                                },
                                textStyle: {
                                    rich: {
                                        //标题
                                        title: {
                                            width: 80,
                                            height: 20,
                                            color: "#FFB22B",
                                            backgroundColor: "rgba(0,0,0,.7)",
                                            padding: [-25, -10, -25, 10],
                                            align: 'top',//控制文本的位置
                                            verticalAlign: "top",
                                            borderColor: '#28446D',
                                            borderWidth: 1,
                                        },
                                        //空白分隔
                                        br: {//这一节主要是为了显示上下间隔，让上下行文字之间有空白间隙，没实际意义
                                            height: 4,
                                        },
                                        img: {
                                            width: 34,
                                            height: 34,
                                            borderColor: '#8CB9EA',
                                            borderWidth: 1,
                                            backgroundColor: {
                                                //引入用户头像图片
                                                // image: self.getImgData(imgUrl)
                                                image: imgUrl
                                            },
                                        },
                                        //用户名字
                                        name: {
                                            verticalAlign: "top",
                                            color: "#fff",
                                            height: 10,
                                            padding: [0, 0, 0, 10],
                                        },
                                        //用户地址
                                        address: {
                                            verticalAlign: "bottom",
                                            color: "#fff",
                                            height: 10,
                                            padding: [0, 0, 0, -22],
                                        },
                                    }
                                }
                            }
                        }
                    });
                })
            };
            this.chart.setOption({
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            color: 'white',
                            show: false
                        }
                    },
                    zoom: 1.2,
                    itemStyle: {
                        normal: {
                            borderWidth: 1, // 区域边框宽度
                            borderColor: '#324B72', // 区域边框颜色
                            areaColor: '#A6C7FF' // 区域颜色
                        },
                        emphasis: {
                            areaColor: '#3889FF'
                        }
                    },
                    //隐藏南海诸岛
                    regions: [{
                        name: "南海诸岛",
                        value: 0,
                        itemStyle: {
                            normal: {
                                opacity: 0,
                                label: {
                                    show: false
                                }
                            }
                        }
                    },
                    ]
                },
                series: chartSeries
            })
        },
        // 新登录用户头像图片处理(把头像整成圆形的)
        // getImgData(imgSrc) {
        //     var fun = function (resolve) {
        //         const canvas = document.createElement('canvas');
        //         const contex = canvas.getContext('2d');
        //         const img = new Image();
        //         img.crossOrigin = '';
        //         img.src = imgSrc;
        //         img.onload = function () {
        //             //设置图形宽高比例
        //            let center = {
        //                 x: img.width / 2,
        //                 y: img.height / 2
        //             }
        //             var diameter = img.width;//半径
        //             canvas.width = diameter;
        //             canvas.height = diameter;
        //             contex.clearRect(0, 0, diameter, diameter);
        //             contex.save();
        //             contex.beginPath();
        //            let radius = img.width / 2;
        //             contex.arc(radius, radius, radius, 0, 2 * Math.PI); //画出圆
        //             contex.clip(); //裁剪上面的圆形
        //             contex.drawImage(img, center.x - radius, center.y - radius, diameter, diameter, 0, 0,
        //                 diameter, diameter); // 在刚刚裁剪的园上画图
        //             contex.restore(); // 还原状态
        //             resolve(canvas.toDataURL('image/png', 1))
        //         }
        //     }
        //     var promise = new Promise(fun);
        //     return promise
        // }


    }
}
</script>
